<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="../public/css/bootstrap.min.css">
    <style>
        /* .error_c{
            padding-top: 5px;
            color: #ff5100;
            padding: 0px;
            margin-top: 2px;
        } */
        .margin{
          padding: 0px;
        }
        .in_block{
            display:inline-block;
        }
        .error_c{
            padding-top: 5px;
            color: #ff5100;
        }
        .error_g{
            color: #00e40b;
        }
    </style>
</head>
<body>
    <div class="center-block">
        <form class="text-center col-md-6 col-md-offset-3">
            <h1 class="text-center col-sm-12">修改密码</h1>
            <div class="form-group">
                <div class="col-sm-12">
                    <label for="inputEmail">用户名</label>
                    <input type="input" class="form-control" id="inputEmail" placeholder="请输入用户名">
                </div>
                <label class="col-sm-12 error_c"></label>
            </div>
            <div class="form-group">
                <div class="col-sm-12">
                    <label for="inputPassword3">原密码</label>
                    <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
                </div>
                <label class="col-sm-12 error_c"></label>
            </div>
            <div class="form-group">
                <div class="col-sm-12">
                    <label for="inputPassword1">新密码</label>
                    <input type="password" class="form-control" id="inputPassword1" placeholder="请输入密码">
                </div>
                <label class="col-sm-12 error_c"></label>
            </div>
            <div class="form-group">
                <div class="col-sm-12">
                    <label for="inputPassword2">确认新密码</label>
                    <input type="password" class="form-control" id="inputPassword2" placeholder="请确认密码">
                </div>
                <label class="col-sm-12 error_c"></label>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary" id='zhuce'>提交</button>
                <div class="col-sm-12 protocol text-right margin"><a href="http://localhost:3000/register">如果您还没有账号?请注册</a></div>
          </div>
        </form>
    </div>
    <script src="../public/js/jquery.js"></script>
    <script src="../public/js/bootstrap.min.js"></script>
    <script>
        var uPattern = /^[a-zA-Z0-9_]{6,12}$/;
        var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z]|[a-z]).*$/;
        let userstr=['用户名长度6-12位','用户名只能输入数字、字母或者_下划线','注册需同意用户协议'];
        let str={
            'a':'请输入密码',
            'b':'密码长度6-20位',
            'c':'密码包括至少1个字母1个数字',
            'd':'两次输入密码不一致',
            'f':'该用户名已被注册'
        }
        function getStr(x){//提示字段
            return `<span class='error_c col-sm-12 text-left'><i class="glyphicon glyphicon-remove-circle"></i>
                ${x}
            </span>`
        }
        // function getStr(x){//提示字段
        //     return `<span class='error_c'><i class="glyphicon glyphicon-remove-circle"></i>
        //         ${x}
        //     </span>`
        // }
        
        //通过字段
        const across=`<i class="glyphicon glyphicon-ok-circle error_g"></i>`
        function getjq(){//$元素
            var password=$('#inputPassword1').val();
            var password2=$('#inputPassword2').val();
            var $input=$('#inputPassword1').parent().next();
            var $input2=$('#inputPassword2').parent().next();
            var $input3=$('#inputEmail').parent().next()
            var user=$('#inputEmail').val();
            return [password,password2,$input,$input2,$input3,user]
        }
        //检查用户名
        function adduser(){
            getjq()[4].empty()
            if(getjq()[5].length<6){
                getjq()[4].append(getStr(userstr[0]));
            }else if(uPattern.test(getjq()[5])!=true){
                getjq()[4].append(getStr(userstr[1]))
            }else{
                getjq()[4].append(across);
                return 'ok'
            }
        }
        //检查密码
        function addpass($input,password){
            $input.empty();
            if(password.length==0){
                $input.append(getStr(str.a));
            }else if(password.length<6){
                $input.append(getStr(str.b));
            }else if(pPattern.test(password)!=true){
                $input.append(getStr(str.c));
            }else{
                $input.append(across);
                return 'ok'
            }
        }
        //检查确认密码
        function addpass2($input2,password,password2){
            $input2.empty()
            if(password2.length==0){
                $input2.append(getStr(str.a));
            }else if(password2!=password){
                $input2.append(getStr(str.d));
            }else{
                $input2.append(across);
                return 'ok'
            }
        }
        //提示用户名是否可用
        $('#inputEmail').change(function(){
            $(this).one('blur',adduser)
        })
        //提示密码是否可用
        $('#inputPassword1').change(function(){
            $(this).one('blur',()=>{
                addpass(getjq()[2],getjq()[0]);
                if(getjq()[1]!=''){
                    if(addpass2(getjq()[3],getjq()[0],getjq()[1])=='ok'){
                    addpass(getjq()[3],getjq()[1]);
                    }else{
                        addpass2(getjq()[3],getjq()[0],getjq()[1]);
                    }  
                };
            })
        })
        $('#inputPassword2').change(function(){
            $(this).one('blur',()=>{
                if(addpass2(getjq()[3],getjq()[0],getjq()[1])=='ok'){
                    addpass(getjq()[3],getjq()[1]);
                }else{
                    addpass2(getjq()[3],getjq()[0],getjq()[1]);
                }            
            })
        });
        $('#inputPassword3').change(function(){
            $(this).one('blur',()=>{
                addpass3()
            })  
        });
        function addpass3(){
            if($('#inputPassword3').val().length>0){
                $('#inputPassword3').parent().next().empty().append(across);
            }else{
                $('#inputPassword3').parent().next().empty().append(getStr(str.a));
            }
        }
        //修改密码按钮
        $("#zhuce").click(function(){
            if($('.error_g').length!=4){
                addpass(getjq()[2],getjq()[0]);
                addpass2(getjq()[3],getjq()[0],getjq()[1]);
                adduser();
                addpass3();
            }
            if($('.error_g').length==4){
                let password=$('#inputPassword3').val()
                console.log(password)
                console.log('正在连接')
                // myajax(getjq()[5],getjq()[0])  
                $.ajax({
                    url:"http://localhost:3000/updatepassword",
                    type:"post",
                    dataType:"json",
                    data:{
                        username:getjq()[5],
                        password:password,
                        newpassword:getjq()[0]
                    },
                    error: function(){console.log("连接失败")},
                    success: (res)=>{
                        if(res.status=="账号错误"){
                            $('#inputEmail').parent().next().empty()
                            $('#inputEmail').parent().next().append(getStr('用户名错误'))
                        }else if(res.status=='密码错误'){
                            $('#inputPassword3').parent().next().empty()
                            $('#inputPassword3').parent().next().append(getStr('密码错误'))
                        }else{
                            console.log('修改密码成功',res)
                            location.href='http://localhost:3000/login'
                        }
                    }
                })
            }else{
                console.log($('.error_g').length)
            }
            return false;
        });
        // $('button').click(()=>{
        //     let user=$('#exampleInputEmail1').val()
        //     let pass=$('#exampleInputPassword1').val()
        //     let newpass=$('#exampleInputPassword2').val()
        //     $('#exampleInputEmail1').next().remove();
        //     $('#exampleInputPassword1').next().remove();
        //     if(user==''){ 
        //         $('#exampleInputEmail1').parent().append(getStr('请输入用户名'))
        //     }
        //     if(pass==''){
        //         $('#exampleInputPassword1').parent().append(getStr('请输入密码'))
        //     }
        //     if(newpass==''){
        //         $('#exampleInputPassword1').parent().append(getStr('请输入密码'))
        //     }
        //     if(user!=''&&pass!=''){
        //         $.ajax({
        //             url:"http://localhost:3000/updatepassword",
        //             type:"post",
        //             dataType:"json",
        //             data:{
        //                 username:user,
        //                 password:pass,
        //                 newpassword:newpass
        //             },
        //             error: function(){console.log("连接失败")},
        //             success: (res)=>{
        //                 if(res.status=="账号错误"){
        //                     $('#exampleInputEmail1').parent().append(getStr('用户名错误'))
        //                 }else if(res.status=='密码错误'){
        //                     $('#exampleInputPassword1').parent().append(getStr('密码错误'))
        //                 }else if(res.status=="登录成功"){
        //                     console.log('登录成功')
        //                     location.href='http://localhost:3000/'
        //                 }
        //             }
        //       }) 
        //     }
        //     return false
        // })  
    </script>
</body>
</html>
